/**
 * title: 工资单提交情况统计表
 */

import React, { useState, useEffect, useCallback } from 'react'
import { connect } from 'dva'
import SearchFrom from '../../components/SearchFrom'
import TableList from '../../components/findTable2'
import { Radio } from 'antd'
import './index.css'

// form表单内容
const formArr = [
  {
    labelVal: 'companyName',
    labelText: '单位名称',
    type: 'Select',
    initialValue: '全部',
    children: ['盐田支公司', '龙岗支公司', '布吉支公司', '龙华支公司', '福田支公司', '罗湖支公司', '宝安支公司', '新洲支公司', '信息技术部', '客户服务部', '办公室', '出单中心', '车辆保险部', '全部']
  },
  {
    labelVal: 'fullYear',
    labelText: '年度',
    type: 'Select',
    initialValue: '全部',
    children: [2019, 2020, '全部']
  },
  {
    labelVal: 'month',
    labelText: '月份',
    type: 'Select',
    initialValue: '全部',
    children: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, '全部']
  },
  {
    labelVal: 'issueNumber',
    labelText: '发放次数',
    type: 'Input',
    initialValue: '全部',
  },
  {
    labelVal: 'employmentForm',
    labelText: '用工形式',
    type: 'Select',
    initialValue: '全部',
    children: ['总地版员工', '派遣员工', '外包人员', '其他从业人员', '派遣&外包', '全部']
  },
  {
    labelVal: 'submitState',
    labelText: '提交状态',
    type: 'Select',
    initialValue: '全部',
    children: ['待提交', '未提交', '已提交', '全部']
  },
  {
    labelVal: 'auditStatus',
    labelText: '审核状态',
    type: 'Select',
    initialValue: '全部',
    children: ['待审核', '审核中', '审核不通过', '全部']
  }
]
// table表格标题内容
const columns = [
  {
    title: '单位名称',
    dataIndex: 'companyName'
  },
  {
    title: '年度',
    dataIndex: 'fullYear'
  },
  {
    title: '月份',
    dataIndex: 'month'
  },
  {
    title: '发放次数',
    dataIndex: 'issueNumber'
  },
  {
    title: '用工形式',
    dataIndex: 'employmentForm'
  },
  {
    title: '提交状态',
    dataIndex: 'submitState'
  },
  {
    title: '提交时间',
    dataIndex: 'subTime'
  },
  {
    title: '审核状态',
    dataIndex: 'auditStatus'
  },
  {
    title: '当前审核节点',
    dataIndex: 'reviewNode'
  }
]
const Prayroll = ({
  payrollData,
  getPayrollData,
  payrollDataTotle
}) => {
  const [searchFromVal, setSearchFromVal] = useState('')
  const [radioVal, setRadioVal] = useState('b')

  const handleGetPayrollData = useCallback((params) => {
    searchFromVal && getPayrollData({ ...searchFromVal, unitCategory: radioVal, ...params })
  },[searchFromVal, radioVal, getPayrollData])

  useEffect(() => {
    handleGetPayrollData()
  }, [searchFromVal, radioVal, handleGetPayrollData])

  return (
    <div className="page-payroll">
      <SearchFrom setSearchFromVal={setSearchFromVal} formArr={formArr}></SearchFrom>
      <Radio.Group value={radioVal} >
        <Radio.Button value="b" onClick={() => { setRadioVal("b") }}>机关部门</Radio.Button>
        <Radio.Button value="a" onClick={() => { setRadioVal("a") }} >经营机构</Radio.Button>
      </Radio.Group>
      <TableList
        className='tablebox'
        bordered
        rowKey="ID"
        dataSource={searchFromVal ? payrollData : []}
        columns={columns}
        total={payrollDataTotle * 1}
        setTableList={handleGetPayrollData}
      />
    </div >
  )
}

export default connect(
  ({ global }) => ({
    payrollData: global.payrollData,
    payrollDataTotle: global.payrollDataTotle
  }),
  {
    getPayrollData ({ _page = 1, _limit = 7, ...rest }) {
      return {
        type: 'global/getPayrollData', params: { _page, _limit, ...rest }
      }
    }
  }
)(Prayroll)
